<template>
  <div class="chunk-content">
    <div class="back-page" @click="emit('back')">
      <Icon type="md-arrow-back" />

      <span>查看文件</span>
    </div>

    <Input
      v-model="searchValue"
      class="search-input"
      clearable
      search
      placeholder="输入关键词搜索"
      @on-search="getData(true)"
      @on-click="getData(true)"
      @on-clear="getData(true)"
    />

    <div class="out-box" v-loading="loading">
      <ul class="chunk-gather">
        <li v-for="item in sliceFindallList" :key="item.id">
          <div class="top-content">
            <span>{{ item.title }}</span>

            <Switch v-model="item.isenable" @on-change="statusChange(item)"></Switch>
          </div>

          <p class="desc">{{ item.content || '暂无切片内容~' }}</p>

          <div class="check-detail-btn" @click="checkDetails(item)">查看详情</div>
        </li>
      </ul>
    </div>

    <Page
      v-model="pageIndex"
      :page-size="pageSize"
      :total="total"
      show-elevator
      show-total
      @on-change="getData()"
    />

    <p v-if="!sliceFindallList.length && !loading" class="no-thing">暂无切片~</p>

    <EditDialog
      ref="editDialogRef"
      v-if="editDialogDisplay"
      @cancel="editDialogDisplay = false"
      @submit="handleDialogSubmit"
    />
  </div>
</template>

<script setup>
import { onMounted, ref, inject, nextTick } from 'vue'
import { Message } from 'view-ui-plus'

import { myKnowledge } from '@/api/modules/knowledgeBase'
import EditDialog from './EditDialog.vue'

const emit = defineEmits(['cancel', 'submit', 'back'])

const props = defineProps({
  details: Object
})
const getTypeId = inject('getTypeId')
// 是否打开弹窗
const visible = ref(true)

// 加载状态
const loading = ref(false)

let tableId = null
const editDialogDisplay = ref(false)
const editDialogRef = ref(null)
const pageIndex = ref(1)
const pageSize = 20
const total = ref(0)

const searchValue = ref('')

const handleDialogSubmit = () => {
  editDialogDisplay.value = false
  getData()
}

const sliceFindallList = ref([])
const getData = (reset) => {
  loading.value = true
  if (reset) {
    pageIndex.value = 1
  }
  myKnowledge[searchValue.value ? 'searchFindall' : 'sliceFindall']({
      query: {
        p: pageIndex.value,
        ps: pageSize
      },
      data: {
        attid: tableId,
        serviceid: getTypeId(),
        content: searchValue.value
      }
    })
    .then(({ data }) => {
      sliceFindallList.value = data.topicList
      total.value = data.totalElements
    })
    .finally(() => {
      loading.value = false
    })
}

const statusChange = (data) => {
  return myKnowledge.isenable({
    data: {
      id: data.id,
      isenable: data.isenable
    }
  })
}

const checkDetails = (data) => {
  editDialogDisplay.value = true

  nextTick(() => {
    editDialogRef.value.initData(data)
  })
}

/**
 * 提交表单
 */
const submit = async () => {
  let valid = await formEl.value.validate()
  if (!valid) return

  loading.value = true

  try {
    // await myKnowledge.fileedit({
    //   data: {
    //     kbtag: tagList.value.toString(),
    //     id: tableId
    //   }
    // })

    Message.success('操作成功')
    emit('submit')
  } catch (error) {
    console.error(error)
  }

  loading.value = false
}

/**
 * 取消表单
 */
const cancel = () => {
  emit('cancel')
}

const initData = (data = {}) => {
  tableId = data.id
  visible.value = true

  getData()
}

defineExpose({
  initData
})
</script>

<style scoped lang="scss">
@import '@/assets/styles/mixin.scss';

.out-box {
  height: calc(100vh - 276px);
  overflow-y: auto;
  margin-bottom: 16px;
}

.chunk-content {
  background-color: #fff;
  height: 100%;
  padding: 10px 20px;
  position: relative;
  overflow-y: auto;
  .back-page {
    font-size: 18px;
    display: flex;
    align-items: center;
    width: fit-content;
    padding: 4px 8px;
    transition: all .2s;
    border-radius: 8px;
    cursor: pointer;
    transform: translateX(-8px);
    &:hover{
      background-color: #f3f3f4;
    }
    .ivu-icon-md-arrow-back {
      border: 1px solid #ebedf2;
      border-radius: 50%;
      padding: 2px;
      color: #8d93a2;
    }
    > span {
      margin-left: 8px;
    }
  }
  .search-input {
    width: 240px;
    margin: 16px 0;
  }
  .chunk-gather {
    display: grid;
    grid-gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    li {
      padding: 12px 20px;
      border: 1px solid #edeef2;
      border-radius: 16px;
      height: 142px;
      position: relative;
      overflow: hidden;
      &:hover {
        border-color: #5e4bf6;
        .check-detail-btn {
          display: flex;
        }
      }
      .top-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        > span {
          @include text-ellipsis();
          max-width: 200px;
        }
      }
      .desc {
        font-size: 12px;
        margin-top: 8px;
        line-height: 22px;
        color: #26244ccc;
        @include text-ellipsis(4);
      }
      .check-detail-btn {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 54px;
        background-color: #fff;
        // display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        color: #5e4bf6;
        display: none;
      }
    }
  }

  .no-thing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 16px;
  }
}
</style>
